<template>
  <div class="SiteRents-container">

    <el-card>
      <el-form>

        <template>
          <!-- 头部搜索和按钮 -->
          <el-input prefix-icon="el-icon-search" placeholder="订单号、账单标题、车牌" style="width:200px" size="small" class="inputs" />
          <el-select v-model="arr.one" size="small" placeholder="订单状态">
            <el-option value="代付款" />
            <el-option value="交易成功" />
            <el-option value="超时关闭" />
            <el-option value="取消订单" />

          </el-select>
          <el-select v-model="arr.two" size="small" placeholder="收费类型">
            <el-option value="月租" />
            <el-option value="临停" />
            <el-option value="邀请" />
          </el-select>
          <el-select v-model="arr.three" size="small" placeholder="支付通道">
            <el-option value="支付宝" />
            <el-option value="微信" />
          </el-select>
          <el-button icon="el-icon-search" size="small" type="primary">搜索</el-button>
          <el-button size="small" type="danger">批量删除</el-button>
          <el-button size="small" type="success">批量导出</el-button>
        </template>
      </el-form>
      <!-- 小区内容 -->

      <el-table border :data="list" class="tables">
        <el-table-column type="selection" width="50" />
        <el-table-column label="订单号" prop="orderNum" align="center" />
        <el-table-column label="订单标题" prop="title" align="center" />
        <el-table-column label="车位" prop="parkingNo" align="center" />
        <el-table-column label="车牌号" prop="carNumber" align="center" />
        <el-table-column label="总价" prop="total" align="center" >
          <template v-slot="{row}">
            {{ `￥${row.total}元`}}
          </template>
        </el-table-column>
        <el-table-column label="支付方式" prop="money" align="center">
          <template>
            <el-tag />
          </template>
        </el-table-column>
        <el-table-column label="收费类型" prop="money" align="center">
          <template>
            <el-tag />
          </template>
        </el-table-column>
        <el-table-column label="停车时长" prop="parkingTime" align="center" >
          <template v-slot="{row}">
            {{`${row.parkingTime}分钟`}}
          </template>
        </el-table-column>
        <el-table-column label="处理情况" prop="money" align="center">
          <template>
            <el-tag type="warning">
              交易成功
            </el-tag>
          </template>
        </el-table-column>

        <!-- <el-table-column label="价格" prop="total" align="center" /> -->
        <el-table-column label="操作" align="center" width="200">
          <template>
            <el-button type="danger" size="small" @click="delet">删除</el-button>
            <el-button type="success" size="small" @click="revise">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹层 -->

      <!-- 分页内容 -->
      <div class="block">

        <el-pagination

          :page-sizes="[5, 10, 50, 100,200]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="200"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

  </div>
</template>

<script>
import { getAllParkingOrder } from '@/api/carpaking/index'
export default {
  data() {
    return {
      arr: {
        one: '',
        two: '',
        three: ''
      },
      list: [],
      fromData: {
        // 卡种
        region: '',
        // 价格
        money: '',
        // 编号
        number: ''
      },

      showDialog: false
    }
  },
  created() {
    this.getAllParkingOrder()
  },
  methods: {
    async getAllParkingOrder() {
      this.list = await getAllParkingOrder({
        pageIndex: 1,
        pageSize: 10,
        info: '',
        comId: 0,
        type: '',
        channel: '',
        state: ''
      })
      console.log(this.list)
    },
    // 每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 删除按钮
    delet() {

    },
    // 修改
    revise() {

    }

  }
}
</script>

<style>
 .SiteRents-container{
  margin: 0px 20px;

 }
.inputs{
    margin-right: 15px;
  }
  .tables{
    margin-top: 10px;
  }

</style>
